<template>
  <div class="settings-container">
    <!-- 设置列表 -->
    <div class="settings-list">
      <!-- 账户与安全 -->
      <div class="settings-group">
        <el-card>
          <el-menu>
            <el-menu-item @click="handleClick('security')">
              <span>账号与安全</span>
              <el-icon><ArrowRight /></el-icon>
            </el-menu-item>
            <el-menu-item @click="handleClick('footprint')">
              <span>足迹设置</span>
              <el-icon><ArrowRight /></el-icon>
            </el-menu-item>
          </el-menu>
        </el-card>
      </div>

      <!-- 基础设置组 -->
      <div class="settings-group">
        <el-card>
          <el-menu>
            <el-menu-item v-for="item in basicSettings"
                          :key="item.type"
                          @click="handleClick(item.type)">
              <span>{{ item.title }}</span>
              <span v-if="item.type === 'city'" class="menu-value">{{ currentCity }}</span>
              <el-icon><ArrowRight /></el-icon>
            </el-menu-item>
          </el-menu>
        </el-card>
      </div>

      <!-- 其他设置组 -->
      <div class="settings-group">
        <el-card>
          <el-menu>
            <el-menu-item v-for="item in otherSettings"
                          :key="item.type"
                          @click="handleClick(item.type)">
              <span>{{ item.title }}</span>
              <span v-if="item.value" class="menu-value">{{ item.value }}</span>
              <el-icon><ArrowRight /></el-icon>
            </el-menu-item>
          </el-menu>
        </el-card>
      </div>

      <!-- 按钮组 -->
      <el-button class="switch-account-btn" type="info" plain @click="handleSwitchAccount">
        切换账号
      </el-button>

      <el-button class="logout-btn" type="danger" plain @click="handleLogout">
        退出登录
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'

const router = useRouter()
const currentCity = ref('当前城市：广州市')

// 处理设置项点击
const handleClick = (type) => {
  switch (type) {
    case 'security':
      router.push('/settings/security')
      break
    case 'city':
      handleCityChange()
      break
    case 'cache':
      handleClearCache()
      break
      // 其他设置项的处理...
    default:
      console.log('点击设置项：', type)
  }
}
const basicSettings = [
  { title: '首页设置', type: 'home' },
  { title: '导航设置', type: 'navigation' },
  { title: '地图设置', type: 'map' },
  { title: '语音设置', type: 'voice' },
  { title: '城市切换', type: 'city' }
]

const otherSettings = [
  { title: '推送通知设置', type: 'notification' },
  { title: '常用出行方式', type: 'travel' },
  { title: '关于共享充电', type: 'about' },
  { title: '主题检验', type: 'theme' },
  { title: '隐私', type: 'privacy' },
  { title: '通用', type: 'general', value: '客服、帮助与建议' },
  { title: '帮助中心', type: 'help' },
  { title: '清理缓存', type: 'cache' }
]
// 处理切换城市
const handleCityChange = () => {
  // 实现城市切换逻辑
  console.log('切换城市')
}

// 处理清理缓存
const handleClearCache = () => {
  ElMessageBox.confirm('确定要清理缓存吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 实现清理缓存逻辑
    localStorage.clear()
    ElMessage.success('缓存已清理')
  }).catch(() => {})
}

// 处理切换账号
const handleSwitchAccount = () => {
  ElMessageBox.confirm('确定要切换账号吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    router.push('/login')
  }).catch(() => {})
}

// 处理退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    localStorage.removeItem('token')
    router.push('/login')
  }).catch(() => {})
}
</script>

<style scoped>
.settings-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.settings-group {
  margin-bottom: 20px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.settings-group :deep(.el-cell) {
  padding: 16px 20px;
}

.settings-group :deep(.el-cell:not(:last-child)) {
  border-bottom: 1px solid #ebeef5;
}

.settings-group :deep(.el-cell__title) {
  font-size: 15px;
  color: #333;
}
.el-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 50px;
}

.menu-value {
  color: #999;
  font-size: 14px;
  margin-right: 10px;
}

.el-icon {
  margin-left: auto;
}
.settings-group :deep(.el-cell__value) {
  color: #999;
  font-size: 14px;
}

.switch-account-btn,
.logout-btn {
  width: 100%;
  margin-top: 20px;
  height: 44px;
  border-radius: 8px;
}

.switch-account-btn {
  margin-bottom: 12px;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .settings-container {
    padding: 10px;
  }

  .settings-group :deep(.el-cell) {
    padding: 12px 16px;
  }
}
</style>